<template>
    <view class="ph-40 mt-20 identity">
        <view class="f ai-c h-112 list">
            <view class="fs-32 text-color4 w-96 mr-40 fs-32 text-color4">+86</view>
			<u-input v-model="tel" type="number" border="none" placeholder="请输入手机号"  @change="isBtn" />
			        </view>
        <view class="f ai-c h-112 list">
            <view class="fs-32 text-color4 w-96 mr-40 fs-32 text-color4">验证码</view>
            <view class="f ai-c jc-s-b">
                <u-input placeholder="请输入验证码" border="none" type="number" fontSize="16" v-model='sms_code'></u-input>
                <view class="w-1 h-40 su"></view>
                <view class="fs-32 text-color ml-16"  @click="toCode">发送验证码</view>
            </view>
        </view>
        <view :style="{ paddingBottom: safeAreaBottom + 'px' }" class="bot w-f">
            <view class="f jc-f-e h-136 ai-c ph-40">
                <view class="w-327 h-96 b-96 f ai-c jc-c fs-32 fw-600 text-color4 btn1 ml-16" @click="back">取消</view>
                <view class="w-327 h-96 b-96 f ai-c jc-c fs-32 fw-600 text-color5 btn2 ml-16" @click="next">下一步</view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import { sendSmsCode } from '@/services/api/auth';
	import { validatePhoneNumber } from '@/utils/global';
	const isAgree = ref(false);
	const tel = ref('');
	const sms_code = ref('');
	const disabled = ref(false);
	
	//发送验证码
	async function toCode() {
	   if (!validatePhoneNumber(tel.value)) {
	       uni.showToast({
	           title: '请输入正确手机号',
	           icon: 'none',
	       });
	       return;
	   }
	   await sendSmsCode({ mobile: tel.value, scene: 1 });
	   uni.showToast({
	       title: '发送成功',
	       icon: 'none',
	   });
	};
	function isBtn() {
	    if (tel.value.length === 11 && isAgree.value) {
	        disabled.value = false;
	    } else {
	        disabled.value = true;
	    }
	}
	function back(){
		uni.navigateBack()
	}
	const emit = defineEmits<{
	    // update:固定写法，后面的变量是父组件中v-model：后面的这个变量
	    (event: 'fn', n: number, n: number, n: number): void
	}>()
	
	function next(){
		emit('fn', 2,sms_code.value,tel.value)
	}
	
//底部安全距离
const systemInfo = uni.getSystemInfoSync();
let safeArea = systemInfo.safeArea;
let screenHeight = systemInfo.screenHeight;
let safeAreaBottom = screenHeight - safeArea.bottom;
</script>
<style lang="scss" scoped>
.identity {
    .btn1 {
        background: #f5f5f5;
    }
    .btn2 {
        background: #fabb3c;
    }
    .bot {
        position: fixed;
        left: 0;
        bottom: 0;
        background: #fff;
    }
    .su {
        background: #faf4e9;
    }
    .list {
        border-bottom: 1px solid #f5f5f5;
    }
}
</style>
